<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserinfoStore } from '@/stores/userinfo'
import jwt_decode from 'jwt-decode'
import { ElMessage } from 'element-plus'

// const a = jwt_decode(localStorage.getItem("token"))
// console.log(a);
//变量
var phonePatten = /^1[35789]\d{9}$/
var passwordPatten = /^\w{6,12}$/
var emailPatten = /^\w+@\w+\.\w+/

const useStore = useUserinfoStore()
const router = useRouter()

const account = ref("");//账号
const password1 = ref("");//第一次输入密码
const password2 = ref("");//第二次输入密码
const username = ref('')//姓名
const email = ref('')//邮箱
const brithday = ref('')//生日
const gender = ref('男')//性别
const birthType = ref('input')//生日输入框类型
const passwordTip = ref('')//密码提示

const isAccountTrue = ref(true)
const isPasswordTrue1 = ref(true)
const isPasswordTrue2 = ref(true)
const isUsernameExsit = ref(true)
const isEmailTrue = ref(true)
const isBirthExsit = ref(true)

//函数
const open = (msg) => {
    ElMessage(msg)
}

function isTrue(num) {
    if (num == 1) {
        isAccountTrue.value = phonePatten.test(account.value)
    } else if (num == 2) {
        isPasswordTrue1.value = passwordPatten.test(password1.value)
    } else if (num == 3) {
        passwordTip.value = '*请输入正确的密码(6-12位数字,字母组成)'
        isPasswordTrue2.value = passwordPatten.test(password2.value)
        if (password1.value != password2.value) {
            passwordTip.value = '两次输入的密码不一致'
        }
    } else if (num == 4) {
        if (username.value != '') {
            isUsernameExsit.value = true;
        } else {
            isUsernameExsit.value = false;
        }
    } else if (num == 5) {
        isEmailTrue.value = emailPatten.test(email.value)
    } else if (num == 6) {
        birthType.value = 'input'
        if (brithday.value != '') {
            isBirthExsit.value = true;
        } else {
            isBirthExsit.value = false;
        }
    }
}

function register() {
    if (account.value == "" || password1.value == "" || password2.value == "" || username.value == ""
        || email.value == "" || brithday.value == "") {
            open("请输入完整信息")
    } else {
        if (isAccountTrue && isPasswordTrue1 && isPasswordTrue2 && isPasswordTrue2 && isUsernameExsit && isEmailTrue && isBirthExsit) {
            const userinfo = {
                "phone": account.value,
                "loginPassword": password1.value,
                "userName":username.value,
                "email":email.value,
                "bornDate":brithday.value,
                "gender":gender.value
            }
            axios({
                url: "http://192.168.110.221:8080/user/registerController",
                method: "post",
                headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },
                data: userinfo
            })
                .then(function (resp) {
                    if (resp.data.code == 200) {
                        localStorage.setItem("token",resp.data.datas.token)
                        localStorage.setItem("longToken",resp.data.datas.longToken)
                        router.push('/')
                        //成功得话就返回对象
                        const userinfo = {}
                        //将返回得对象变成全局对象
                        useStore.userinfo.value = userinfo

                    } else if (resp.data.code == 400) {
                        open(resp.data.msg)
                    } else if (resp.data.code == 401) {
                        open(resp.data.msg)
                    }
                })
        }else{
            console.log("isAccountTrue:"+isAccountTrue.value);
            console.log("isPasswordTrue1:"+isPasswordTrue1.value);
            console.log("isPasswordTrue2:"+isPasswordTrue2.value);
            console.log("isUsernameExsit:"+isUsernameExsit.value);
            console.log("isEmailTrue:"+isEmailTrue.value);
            console.log("isBirthExsit:"+isBirthExsit.value);
        }
    }
}
</script>

<template>
    <div class="back-box">
        <h1 class="header">欢迎注册Ewallet</h1>
        <!-- <div class="title">
            <span class="logo">logo</span>
            <span>支付</span>
        </div> -->
        <div class="body">
            <li>
                <div>
                    <span class="iconfont">&#xe692;</span>
                    <input type="text" v-model="account" placeholder="请输入手机号" @keyup="isTrue(1)" @keyup.enter="login()">
                </div>
                <p v-if="!isAccountTrue">*请输入正确的手机号</p>
            </li>

            <li>
                <div>
                    <span class="iconfont">&#xe8b2;</span>
                    <input type="password" v-model="password1" placeholder="请输入密码" @keyup="isTrue(2)" @keyup.enter="login()">
                </div>
                <p v-if="!isPasswordTrue1">*请输入正确的密码(6-12位数字,字母组成)</p>
            </li>
            <li>
                <div>
                    <span class="iconfont">&#xe624;</span>
                    <input type="password" v-model="password2" placeholder="请再次输入密码" @keyup="isTrue(3)"
                        @keyup.enter="login()">
                </div>
                <p v-if="!isPasswordTrue2">{{ passwordTip }}</p>
            </li>
            <li>
                <div>
                    <span class="iconfont icon-zhanghao" style="font-size: 19px;"></span>
                    <input type="input" v-model="username" placeholder="请输入姓名" @keyup="isTrue(4)" @keyup.enter="login()">
                </div>
                <p v-if="!isUsernameExsit">*请输入姓名</p>
            </li>
            <li>
                <div>
                    <span class="iconfont">&#xe908;</span>
                    <input type="email" v-model="email" placeholder="请输入邮箱" @keyup="isTrue(5)" @keyup.enter="login()">
                </div>
                <p v-if="!isEmailTrue">*请输入正确的邮箱</p>
            </li>
            <li>
                <div>
                    <span class="iconfont">&#xe7a6;</span>
                    <input :type="birthType" v-model="brithday" placeholder="请输入生日" @blur="isTrue(6)" @keyup.enter="login()"
                        @click="birthType = 'date'">
                </div>
                <p v-if="!isBirthExsit">*请输入生日</p>
            </li>

            <div class="radio-container">
                <div>
                    <span>请选择性别</span>
                    <label for="male">男</label>
                    <input type="radio" name="gender" v-model="gender" value="男" id="male" class="radio-style" checked>
                    <label for="female">女</label>
                    <input type="radio" name="gender" v-model="gender" value="女" id="female" class="radio-style">
                </div>
            </div>
            <li>
                <div  style="background-color: transparent;border: none;border-radius: 0%;">
                    <p style="float: right;font-size: 12px;color: blue;" class="p-login" @click="router.push('/login')">已有账号？请登录</p>
                </div>                
            </li>
            <li>
                <button class="login-btn" @click="register">注册</button>
            </li>
        </div>
    </div>
</template>

<style scoped>
* {
    text-align: center;
    list-style: none;
    text-decoration: none;
}
.p-login:hover{
    text-decoration: underline;
}
.back-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../assets/img/b5.png");
    background-size: 100% 100%;
}
.radio-style {
    /* all: initial; */
    width: 20px;
    height: 20px;
}

.radio-container {
    margin-top: 20px;
}
.radio-container span{
    font-size: 16px;
    vertical-align: top;
}
.radio-container div {
    text-align: left;
    width: 260px;
    margin: 0 auto;
    text-indent: 2em;
}

.radio-container div label {
    margin-left: 15px;
    margin-right: 10px;
    vertical-align: top;
}

.header {
    margin-top: 60px;
    font-size: 24px;
    color: rgba(51, 88, 255, 0.781);
    font-style: italic;
}

.title {
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
}

.title span {
    display: inline-block;
}

.logo {
    width: 30px;
    margin-right: 10px;
}

.body {
    margin-top: 50px;
}

.body::after {
    display: block;
    content: "";
    clear: both;
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 22px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    margin-right: 5px;
}

input {
    text-align: left;
    width: 200px;
    height: 30px;
    outline: none;
    font-size: 16px;
    border: transparent;
    background-color: transparent;
}

.code-text {
    width: 120px;
}

.code-pic {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-left: 8px;
    width: 70px;
    border: 1px solid black;
    vertical-align: top;
}

.body>li {
    margin-top: 20px;
}

.body>li::after {
    margin: 0 auto;
    display: block;
    content: "";
    clear: both;
}

.body>li>div~p {
    width: 260px;
    margin: 0 auto;
    color: red;
    text-align: left;
    text-indent: 10px;
}

.body>li>div {
    overflow: hidden;
    display: inline-block;
    border: 1px solid #d6d6d6;
    width: 260px;
    border-radius: 20px;
    background-color: #fff;
}

.code-div {
    width: 180px !important;
    right: 40px;
}

.login-btn {
    width: 260px;
    height: 30px;
    border-radius: 20px;
    border: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: rgba(11, 86, 247, 0.781);
}

li>p {
    font-size: 13px;
}</style>